<%@page import="com.nebula.common.Const"%>
<%@page import="com.nebula.pojo.User"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
	User user = (User) session.getAttribute(Const.USERINFO);
 %>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="static/html5shiv.js"></script>
<script type="text/javascript" src="static/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/magic-radio.css" />
<!--[if IE 6]>
<script type="text/javascript" src="static/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title></title>
<style type="text/css">
<style type="text/css">
	.col{margin-top:20px}
	.col h4{height:40px;line-height:40px}
	.opt{height:30px;line-height:24px;display: inline-block;padding-top: 5px;margin-left: 40px}
	.tip{padding-left:15px;font-size: 12px;color: #8b909e}
	.content{
		margin-left: 20px;
	}
	.url{
		display: inline-block;
		position: relative;
	}
	.share-url-border{
		border:1px solid #e9e9e9;
		border-radius:4px;
		display:inline-block;
		width: 365px;
		height: 35px;
        vertical-align: middle;
        *position: absolute;
        *top: 50%;
        margin-top: 20px;
	}
	.share-url {
		border:none;
		font-size: 12px;
		width:256px;
		height: 35px;
		padding-left:8px;
		color: rgb(102, 102, 102);
	}
	.share-validity-zip{
		color: #818796;
		font-size: 14px
	}
	.copy-button{
		float: right;
		margin-left: 8px;
		margin-top: 20px;
	}
	.private{
		color: #368cff;
		font-size: 16px;
		position: relative;
	}
	.copy-tips,.copy-tips1{
		text-align: center;
		color: #3b8cff;
		font-size: 13px;
	}
	.password{
		display: block;
		margin-top: 10px;
	}
	.share-password{
		width:40px;
		height: 19px;
		line-height: 18px;
		padding: 8px;
		border: 1px solid #e9e9e9;
		border-radius: 4px;
		display: inline-block;
	}
	.g-button-right{
		padding-right: 15px;
		padding-left: 15px;
	}
	.a-right{
		float: right;
		margin-right: 15px;
	}
	.pointer{
		cursor: pointer;
	}
	.footer1{
    	position: absolute;
    	bottom: 45px;
    	padding: 0 15px;
    	width: 500px;
    }
    .main-center{
	    text-align: center; /*让div内部文字居中*/
	    background-color: #fff;
	    border-radius: 20px;
	    width: 300px;
	    height: 235px;
	    margin: auto;
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	}	
}
</style>
</head>
  
<body>
<input type="hidden" value="<%=user.getUserGroups().getGroupid()%>" id="groupId">
<div style="height: 320px;">
	<div style="background: #f7faff;width:auto;" id="radio-div">
		<div class="opt">
			<input class="regular-radio" id="super-member" type="radio"
			 name="share-type" value="超级会员" checked="checked">
			<label for="super-member" class="pointer">超级会员(推荐)</label>
		</div>
		<div class="opt" style="margin-left: 20px">
			<input class="regular-radio" id="member" type="radio"
			 name="share-type" value="普通会员">
			<label for="member" class="pointer">普通会员</label>
		</div>
	</div>
	<div style="margin-top: 10px;margin-left: 40px" >
		<h4 style="color: red;display: block;" id="super">超级会员权限：5T空间、单文件上传大小10G</h4>
		<h4 style="color: red;display: none;" id="common">普通会员权限：2T空间、单文件上传大小5G</h4>
	</div>
	<div style="margin-top: 40px;margin-left: 40px" id="choose">
		<div id="order" style="display:inline-block;width: 100%">
			<div>
				<span>支付类型</span>
				<select class="select" size="1" name="paymentType"
					style="width: 130px;height: 30px;margin-left: 50px" title="" id="paymentType">
					<option value="1" selected="selected">在线支付</option>
				</select>
			</div>
			<div style="margin-top: 30px">
				<span>支付方式</span>
				<select class="select" size="1" name="validity"
					style="width: 130px;height: 30px;margin-left: 50px" title="" id="validity">
					<option value="1" selected="selected">支付宝</option>
				</select>
			</div>
			<div style="margin-top: 30px">
				<span>开通时长</span>
				<select class="select" size="1" name="validity"
					style="width: 130px;height: 30px;margin-left: 50px" title="" id="validity">
					<option value="199" selected="selected" id="opt">永久有效 ￥199</option>
				</select>
			</div>
			<div class="mt-50">
				<span style="margin-left: 300px">
					<a class="btn btn-primary radius" id="createOrder" href="javascript:;">立即支付</a>
					<a class="btn btn-secondary-outline radius ml-10" data-title="取消" data-href="#" id="closeBtn" href="javascript:;" >取消</a>
				</span>
			</div>
		</div>
	</div>
	<div class="main-center" style="margin:50px auto;display: none;"></div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.base64.js"></script>
<script type="text/javascript">
$(function(){
	$.ajax({
		type: "post",
		url: "/nebula/userGroups/info.action",
		dataType: "json",
		success : function(_data){
			$(".opt").eq(0).attr("data-id",_data.data[0].groupid);
			$(".opt").eq(1).attr("data-id",_data.data[1].groupid);
		}
	});

	$(".regular-radio").click(function(){
		if($(this).val() === "超级会员"){
			$("#opt").html("永久有效 ￥199");
			$("#opt").val("199");
			$("#super").show();
			$("#common").hide();
		}else if($(this).val() === "普通会员"){
			$("#opt").html("永久有效 ￥99");
			$("#opt").val("99");
			$("#super").hide();
			$("#common").show();
		}
	});
	
	var orderNo , groupId , payment , type;
	
	$("#createOrder").click(function(){
		groupId = $("input[name=share-type]:checked").parent().attr("data-id");
		payment = $(".select").eq(2).find("option:selected").val();
		type = $("input[name=share-type]:checked").val();
		
		if($("#groupId").val() >= groupId){ 
			layer.msg("您已是\""+type+"\"请勿重复购买!",{icon:0,offset: "t",time:2000});
		}else{
			$("#super").hide();
			$("#common").hide();
			var i;
			$.ajax({
				type: "post",
				url: "/nebula/order/create-order.action",
				data: {
					groupId : groupId,
					payment : payment,
					paymentType : $("#paymentType").val()
				}, 
				dataType: "json",
				beforeSend: function () {  
	                i = layer.msg('正在创建二维码', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '0px', time:100000}) ;  
	            },
				success: function(_data){
					if(_data.status == 0){
						layer.close(i);
						orderNo = _data.data;
						$.ajax({
							type: "post",
							url: "/nebula/order/pay.action",
							data: {
								orderNo : orderNo,
								type : type,
							},
							dataType: "json",
							success: function(data){
								if(data.status == 0){
									$(".main-center").show();
									$("#choose").hide();
									var html = 
									'订单号：'+orderNo+''
									+'<img alt="二维码" src="'+data.data.qrUrl+'"><br>'
									+'<a class="btn btn-primary radius" id="paid" href="javascript:;">我已完成扫码,并支付￥'+payment+'元</a>';
									$(".main-center").html(html);
								}
							}
						});
					}
				}
			});
		}
	});
	
	$(".main-center").on("click","#paid",function(){
		$.ajax({
			type: "post",
			url: "/nebula/order/query_order_pay_status.action",
			data: {
				orderNo : orderNo,
			},
			dataType: "json",
			success: function(data){
				if(data.data == true){
					$.ajax({
						type: "post",
						url: "/nebula/user/update-groupid.action",
						data: {
							groupId : groupId,
						},
						dataType: "json",
						success : function(_data){
							
						}
					});
					layer.msg("恭喜您已成功购买\""+type+"\"权限,正是在为您重新登录",{icon:1,offset: "t",time:2000},function(){
						var password = $.cookie("password");
						$.ajax({
							type: "post",
							url: "${pageContext.request.contextPath}/user/login.action",
							data: {
								username : '<%=user.getUsername()%>',
								password : $.base64.decode(password)
							},
							dataType: "json",
							success: function(_data){
								if(_data.status == 0){
									window.parent.location.reload(); 
								}else{
									layer.msg("重新登录失败，请手动登录",{icon:2,time: 2000,offset: "0"},function(){
										window.location.href="${pageContext.request.contextPath}/login.jsp";
									})
								}
							}
						});
					});
				}else{
					layer.msg("您还未扫码支付，请先扫码支付！！！",{icon:2,offset: "t",time:2000});
				}
			}
		});
	});
	
	$("#closeBtn").click(function(){
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);
	});
});
</script>
</body>
</html>
